<template>
    <!-- 还品提醒 -->
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <searchrevealing>
                <el-tabs v-model="activeTab">
                    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="88px">
                        <el-form-item label="电商部门" prop="coreId">
                            <el-select v-model="queryParams.coreId" clearable placeholder="请选择" style="width: 220px"
                                filterable>
                                <el-option v-for="item in supplierNameOptions" :key="item.coreId" :label="item.coreName"
                                    :value="item.coreId" />
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item label="打榜部门" prop="supplierId">
                            <el-select v-model="queryParams.supplierId" clearable placeholder="请选择供应商"
                                style="width: 220px" filterable>
                                <el-option v-for="item in supplierNameOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item> -->

                        <!-- <el-form-item label="提醒状态" prop="supplierId">
                            <el-select v-model="queryParams.supplierId" clearable placeholder="请选择供应商"
                                style="width: 220px" filterable>
                                <el-option label="启用" :value="1" />
                                <el-option label="禁用" :value="0" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="提醒方式" prop="supplierId">
                            <el-select v-model="queryParams.supplierId" clearable placeholder="请选择供应商"
                                style="width: 220px" filterable>
                                <el-option v-for="item in supplierNameOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="提醒节点" prop="supplierId">
                            <el-select v-model="queryParams.supplierId" clearable placeholder="请选择供应商"
                                style="width: 220px" filterable>
                                <el-option v-for="item in supplierNameOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="提醒时间" prop="supplierId">
                            <el-time-picker v-model="queryParams.supplierId" placeholder="提醒时间" />
                        </el-form-item> -->
                        <!-- 
                        <el-form-item label="商品名称" prop="styleName">
                            <el-input v-model="queryParams.styleName" placeholder="请输入商品名称" clearable
                                style="width: 220px" @keyup.enter="handleQuery" />
                        </el-form-item> -->

                    </el-form>
                    <div class="form_button">
                        <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
                        <el-button @click="resetQuery" :loading="loading">重置</el-button>
                    </div>
                </el-tabs>
            </searchrevealing>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部还品提醒'"
                        @updateColumn="getColmun"></right-toolbar>
                </el-row>
            </template>
            <el-table v-loading="loading" row-key="id" :data="tableData" border @header-dragend="dragEnd">
                <el-table-column v-for="(item, index) in returnGoodsInformColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <span v-if="item.prop == 'coreLevel'">{{ getCoreLevel(scope.row.coreLevel) }}</span>
                    </template>
                </el-table-column>

                <!-- <el-table-column label="提醒状态" align="center" prop="styleCode" show-overflow-tooltip
                    :fixed="returnGoodsInformColumns[6].fixed" v-if="returnGoodsInformColumns[6].visible" />
                <el-table-column label="提醒方式" align="center" prop="styleCode" show-overflow-tooltip
                    :fixed="returnGoodsInformColumns[7].fixed" v-if="returnGoodsInformColumns[7].visible" /> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="tableEdit(scope.row)" class="color_theme">编辑</el-button>
                    </template>
                </el-table-column>



                <!-- <el-table-column label="商品名称" align="center" prop="styleName" show-overflow-tooltip
                    :fixed="returnGoodsInformColumns[0].fixed" v-if="returnGoodsInformColumns[0].visible">
                    <template #default="scope">
                        <div class="color_theme">{{ scope.row.styleName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="商品编码" align="center" prop="styleCode" show-overflow-tooltip
                    :fixed="returnGoodsInformColumns[1].fixed" v-if="returnGoodsInformColumns[1].visible" /> -->
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
        <Edit ref="editRef" @getList=getList />
    </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import { ref, onMounted, toRefs } from 'vue';
import Edit from './components/edit/index.vue'
import { queryListPageList } from '@/api/group/returnGoodsInform/index'
import { getDeptPage } from '@/api/group/productSelectionPricing'
import { listColumn } from '@/api/system/column';
const { hm_core_level } = toRefs<any>(proxy?.useDict('hm_core_level'));
const columnData = ref()
const returnGoodsInformColumns = ref()
const editRef = ref()
const showSearch = ref<Boolean>(true)
const loading = ref<boolean>(false)
const activeTab = ref<string>('qualityControl');
const queryFormRef = ref()
const tableData = ref<Array<any>>([])
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    coreId: '',
})
// 总条数
const total = ref<number>(0)
// 电商部门列表
const supplierNameOptions = ref<Array<any>>([])

// 获取电商部门下拉列表
const GetCoreIdList = async () => {
    const res = await getDeptPage({})
    supplierNameOptions.value = res.rows
}
// 获取列表数据
const getList = async () => {
    loading.value = true
    const res = await queryListPageList(queryParams.value)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const tableEdit = (row: any) => {
    editRef.value.open(row)
}
// 主播级别反显
const getCoreLevel = (type: string) => {
    let data = hm_core_level.value.find((item: any) => { return item.value == type })
    return data?.label || ''
}
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('产品部还品提醒')
    returnGoodsInformColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    await getColmun();
    await getList();
    GetCoreIdList()
})

</script>
<style lang="scss" scoped>
@import url(./components/style/index.scss);
</style>